<template>
  <el-container style="height: 870px; width: 100%">
    <el-header style="height: 10%; background-color: rgb(72, 209, 204)">
      <div
        style="
          background-color: rgb(72, 209, 204);
          width: 33%;
          height: 100%;
          float: left;
        "
      ></div>
      <div
        style="
          background-color: rgb(72, 209, 204);
          width: 34%;
          height: 100%;
          float: left;
        "
      >
        <p
          style="
            color: #91959c;
            font-size: 23px;
            line-height: 23px;
            font-weight: bold;
            height: 40px;
          "
        >
          任务安排
        </p>
      </div>
      <div
        style="
          background-color: rgb(72, 209, 204);
          width: 33%;
          height: 100%;
          float: left;
        "
      >
        <el-button v-if="this.hh === 1" type="danger" plain @click="jumpppp()"
          >提交任务</el-button
        >
        <el-button v-if="this.hh === 2" type="danger" plain @click="jumpp()"
          >添加任务</el-button
        >
        <el-button type="danger" plain @click="jump('Index')"
          >返回主页</el-button
        >
      </div>
    </el-header>
    <el-container style="height: 100%">
      <el-main style="padding: 0px">
        <template>
          <div
            id="myChart"
            ref="chart"
            style="width: 100%; height: 700px"
          ></div>
        </template>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  updated() {
    this.changeView();
  },
  data() {
    return {
      oid: "",
      hh: "",
      role: "",
      teamData: [
        {
          oid: "",
          id: "",
          price: "",
          demand: "",
          doc: "",
          photo: "",
          workroomName: "",
          puanduan: "",
        },
      ],
      ydata: [
        // '测试', '开发', '设计', '总进度','一般'
      ],
      startdata: [
        // new Date("2017/09/23"),
        // new Date("2017/09/10"),
        // new Date("2017/09/25"),
        // new Date("2017/09/1"),
        // new Date("2017/09/1"),
      ],
      finishdata: [
        // new Date("2017/09/31"),
        // new Date("2017/09/20"),
        // new Date("2017/10/20"),
        // new Date("2017/09/15"),
        // new Date("2017/09/30"),
      ],
    };
  },
  mounted: function () {
    var user = JSON.parse(window.sessionStorage.getItem("user"));

    this.role = user.role;

    this.oid = this.$route.query.mallCode;

    this.hh = this.$route.query.mallCode2;

    axios
      .post("/workroom/selectWorkroomProgress", {
        tdid: this.oid,
        id: this.oid,
      })
      .then((response) => {
        if (response.data != null) {
          var e = response.data;
          //console.log(e)
          var ydata = [];
          var startdata = [];
          var finishdata = [];

          for (var c = 0; c < e.length; c++) {
            var ee = e[c];

            ydata[c] = ee.name;
            var aa = ee.startdate;
            var aaa = aa.split("T");
            var aaaa = aaa[0];
            var bb = ee.finishdate;
            var bbb = bb.split("T");
            var bbbb = bbb[0];

            startdata[c] = new Date(aaaa);
            finishdata[c] = new Date(bbbb);
          }
          this.ydata = ydata;
          this.startdata = startdata;
          this.finishdata = finishdata;
          this.drawLine();
        }
      });
  },
  methods: {
    drawLine() {
      var barDv = this.$refs.chart;
      console.log(barDv);
      if (barDv) {
        console.log("bar_dv不为空");
        let myChart = this.$echarts.init(barDv);
        console.log(myChart);
        var option = {
          title: {
            text: "任务安排",
          },
          legend: {
            data: ["计划完成时间", "实际完成时间"],
          },
          xAxis: {
            type: "time",
            position: "top",
          },

          yAxis: {
            type: "category",
            data: this.ydata,
          },
          tooltip: {
            trigger: "axis",
            formatter: function (params) {
              var res = params[0].name + "</br>";
              var date0 = params[0].data;
              var date1 = params[1].data;
              // var date2 = params[2].data;
              date0 =
                date0.getFullYear() +
                "-" +
                (date0.getMonth() + 1) +
                "-" +
                date0.getDate();
              date1 =
                date1.getFullYear() +
                "-" +
                (date1.getMonth() + 1) +
                "-" +
                date1.getDate();
              // date2 = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();
              res += params[0].seriesName + ":" + date0 + "</br>";
              res += params[1].seriesName + ":" + date1 + "</br>";
              // res += params[2].seriesName + ":" + date2 + "</br>"
              // console.log(params[0]);
              return res;
            },
          },
          series: [
            {
              name: "计划开始时间",
              type: "bar",
              stack: "总量",
              itemStyle: {
                normal: {
                  color: "rgba(0,0,0,0)",
                },
              },
              data: this.startdata,
            },
            {
              name: "计划完成时间",
              type: "bar",
              stack: "总量",
              data: this.finishdata,
            },

            // {
            //     name: '实际完成时间',
            //     type: 'bar',
            //     stack: '总量',
            //     data: [
            //       new Date("2017/09/30"),
            //       new Date("2017/09/23"),
            //       new Date("2017/10/20"),
            //       new Date("2017/09/14"),
            //       new Date("2017/09/30"),
            //
            //     ]
            //   }
          ],
        };

        myChart.setOption(option);
      } else {
        console.log("bar_dv为空!");
      }
    },

    //    this.oid= this.$route.query.mallCode

    jumppp(path) {
      console.log(path);
      this.$router.push({
        path: "/ChildProject",
        query: {
          mallCode: path,
        },
      });
    },

    jumpppp(path) {
      this.$router.push({
        path: "/ProjectUploadd",
        query: {
          mallCode: this.oid,
        },
      });
    },

    jumpp(path) {
      this.$router.push({
        path: "/AddWorkroomProcess",
        query: {
          mallCode: this.oid,
        },
      });
    },

    jump(path) {
      this.$router.replace({ path: path });
    },
  },
};
</script>











<style >
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-header,
.el-footer {
  color: #7c235b;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #c0c3bf;
  color: #333;
  line-height: 200px;
  font-size: 25px;
  font-weight: bold;
  text-align: left;
}

.el-main {
  background-color: #e0e4eb;
  color: #333;
  text-align: center;
  line-height: 60px;
}

body > .el-container {
  margin-bottom: 40px;
}
. hh {
  height: 56px;
  line-height: 56px;
  position: relative;
  -webkit-box-sizing: border-box;
  white-space: nowrap;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}
.el-menu-item,
.el-submenu__title {
  height: 56px;
  line-height: 56px;
  position: relative;
  -webkit-box-sizing: border-box;
  white-space: nowrap;
  padding-left: 100px;
  /*list-style-position: initial;*/
  list-style-type: initial;
}
.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
